<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择职位</title>
<style>
body{
font-family:微软雅黑}
.left{float:left;
width:100px;
text-align:center}
.left select{
width:80px;
margin-top:10px;}
.middle{
float:left;width:32px; padding-top:40px;
}
.middle input{
margin-top:10px;}
.right{float:left;
width:100px;
text-align:center}
.right select{
width:80px;margin-top:10px;}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<div class="left">
		<span>可选职位</span>
		<select size="6" multiple="multiple" v-model="job">
			<option v-for="value in joblist" :value="value">{{value}}</option>
		</select>
	</div>
	<div class="middle">
		<input type="button" value=">>" v-on:click="toMyjob">
		<input type="button" value="<<" v-on:click="toJob">
	</div>
	<div class="right">
		<span>已选职位</span>
		<select size="6" multiple="multiple" v-model="myjob">
			<option v-for="value in myjoblist" :value="value">{{value}}</option>
		</select>
	</div>
</div>
<script type="text/javascript">
var exam = new Vue({
	el: '#example',
	data: {
		joblist : ['歌手','演员','酒店管理','教师','公务员','公司职员'],//所有职位列表
		myjoblist : [],//已选职位列表
		job : [],//可选职位列表选中的选项
		myjob : []//已选职位列表选中的选项
	},
	methods: {
		toMyjob : function(){
			for(var i = 0; i < this.job.length; i++){
				this.myjoblist.push(this.job[i]);//添加到已选职位列表
				var index = this.joblist.indexOf(this.job[i]);//获取选项索引
				this.joblist.splice(index,1);//从可选职位列表移除
			}
			this.job = [];
		},
		toJob : function(){
			for(var i = 0; i < this.myjob.length; i++){
				this.joblist.push(this.myjob[i]);//添加到可选职位列表
				var index = this.myjoblist.indexOf(this.myjob[i]);//获取选项索引
				this.myjoblist.splice(index,1);//从已选职位列表移除
			}
			this.myjob = [];
		}
	}
})
</script>


</body>

</html>



